import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import './My_list.css'
function Detail_Edit() {
    const [souList, setsouList] = useState([]);
    const { id } = useParams()
    const [ordId, setOrderId] = useState('');
    const [num,setNum] = useState(60);
    const navigate = useNavigate()
    useEffect(() => {
        getXiang()
        const timer =setInterval(() =>{
            setNum(pre =>{
                if(pre > 0){
                    return pre - 1;
                }else{
                    navigate('/ding_detail')
                    clearInterval(timer)
                }
            })
        },1000)
    }, [])
    const getXiang = async () => {
        try {
            const data = await axios.get(`http://localhost:3000/xiang/${id}`)
            console.log(data);
            if (Array.isArray(data.data.data)) {
                setsouList(data.data.data);
                //判断嵌套的数据是否为对象类型
            } else if (data.data.data && typeof data.data.data === 'object') {
                setsouList([data.data.data]);
            } else {
                setsouList([]);
                console.log('格式出错了');
            }
        }
        catch (err) {
            console.log(err);
        }
    }
    
    return (
        <div className='detail_box'>
            {
                souList.map((item, index) => {
                    return (
                        <div className="detail_box_1" key={index}>
                            <div className="dingdan_detail_top">
                                <div className="dingdan_detail_left">
                                    <p>9:41</p>
                                </div>
                                <div className="dingdan_detail_right">
                                    <h3 className='dingdan_detail_right_h3'>
                                        <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                                    </h3>
                                    <h3 className='dingdan_detail_right_h31'>
                                        <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                                    </h3>
                                    <h3 className='dingdan_detail_right_h32'>
                                        <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                                    </h3>
                                </div>
                            </div>
                            <div className="dingdan_detail_wodedingdan">
                                <div className="dingdan_detail_wodedingdan_left">
                                    <p onClick={() => {
                                        navigate('/ding_detail')
                                    }}>
                                        <svg t="1739244511321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4181" width="25" height="25"><path d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536" p-id="4182"></path></svg>
                                    </p>
                                </div>
                                <div className="dingdan_detail_wodedingdan_center">
                                    <h3>我的订单</h3>
                                </div>
                                <div className="dingdan_detail_wodedingdan_right">
                                    <p>
                                        <svg t="1739244623761" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5168" width="30" height="30"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="5169" fill="#9f9475"></path></svg>
                                    </p>
                                </div>
                            </div>
                            <div className="detail_edit_shijian">
                                <div className="detail_edit_shijian_top">
                                    <p>
                                        <svg t="1739260844240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6269" width="30" height="30"><path d="M511.500975 942.159844C273.934971 942.159844 81.341131 749.566004 81.341131 512c0-130.305497 57.946823-247.077427 149.47805-325.963353l40.391111 49.513295A365.45522 365.45522 0 0 0 145.216374 512c0 202.294893 163.989708 366.2846 366.284601 366.2846s366.2846-163.989708 366.2846-366.2846c0-194.579961-151.733645-353.699181-343.329435-365.546043V255.500975a29.94152 29.94152 0 0 1-59.883041 0V111.781676a29.94152 29.94152 0 0 1 29.941521-29.94152 30.388647 30.388647 0 0 1 5.988304 0.59883v-0.58885c0.329357 0 0.668694-0.009981 0.998051-0.00998 237.566004 0 430.159844 192.59384 430.159844 430.159844S749.066979 942.159844 511.500975 942.159844z m35.26113-371.444522a39.922027 39.922027 0 0 1-56.459727 0c-15.589552-15.589552-133.449357-158.729981-117.859805-174.319533s158.729981 102.270253 174.319532 117.859806a39.922027 39.922027 0 0 1 0 56.459727z" fill="#E61D15" p-id="6270"></path></svg>
                                    </p>
                                </div>
                                <div className="detail_edit_shijian_bottom">
                                    <p>
                                        请在00:00:{num}内完成付款，超时将自动取消订单
                                    </p>
                                    <p>
                                        {item.ordId?.name || '暂无订单分类信息'}
                                    </p>
                                </div>
                            </div>
                            <div className="detail_edit_address">
                                <div className="detail_edit_address_top">
                                    <h3>收货地址</h3>
                                    <p>河北省保定市xxxx</p>
                                    <p>秦先生 1300002134</p>
                                </div>
                                <div className="detail_edit_address_center">
                                    <div className="detail_edit_address_center_top">
                                        <h3>购物商城</h3>
                                        <p>{item.name}</p>
                                    </div>
                                    <div className="detail_edit_address_center_center">
                                        <div className="detail_edit_address_center_center_left">
                                            <img src={item.img} alt="" width={90} height={90} />
                                        </div>
                                        <div className="detail_edit_address_center_center_right">
                                            <p><span>{item.name}</span><span className='detail_edit_address_center_center_right_left'>￥{item.price}</span></p>
                                            <p><span>{item.desc}</span><span className='detail_edit_address_center_center_right_left1'>x1</span></p>
                                        </div>

                                    </div>
                                    <div className="detail_edit_address_center_center_bottom">
                                        <p>订单备注：赠送手链</p>
                                    </div>
                                    <div className="detail_edit_address_center_center_bottom">
                                        <p className='detail_edit_address_center_center_bottom_right'>
                                            共1件商品 合计：${item.price}
                                        </p>
                                    </div>
                                </div>
                                <div className="detail_edit_address_last">
                                    <div className="detail_edit_address_last_top">
                                        <h3>价格明细</h3>
                                    </div>
                                    <div className="detail_edit_address_last_top">
                                        <p>
                                            <span>商品明细</span>
                                            <span className='detail_edit_address_last_top1'>￥{item.price}</span>
                                        </p>
                                    </div>
                                    <div className="detail_edit_address_last_top">
                                        <p>
                                            <span>运费</span>
                                            <span className='detail_edit_address_last_top1'>￥ 0.0</span>
                                        </p>
                                    </div>
                                    <div className="detail_edit_address_last_top">
                                        <p>
                                            <span>实付款</span>
                                            <span className='detail_edit_address_last_top1'>￥{item.price}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div className="detail_edit_footer">
                                <div className="detail_edit_footer_left">
                                    <p>取消订单</p>
                                </div>
                                <div className="detail_edit_footer_right">
                                    <p>立即付款</p>
                                </div>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default Detail_Edit;